<template>
  <div>
    <!-- 加减数量 -->
    <div class="b">
      <button @click="sub">-</button>
      <div class="s" :index="index" :title="title">{{ num }}</div>
      <button @click="add">+</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 当前商品数量
    num: "",
    // 商品索引
    index: "",
    // 商品名称
    title: "",
  },
  methods: {
    sub() {
      
      if (this.num > 1) {
        // 如果商品数量大于1 点击减按钮时 数量减一并传给父组件
        return this.$emit("num-change", this.num - 1);
      } 
      // 如果商品数量小于1则进入判断条件
      else {
        if (
          // window.confirm(message)方法用于显示一个带有指定消息和确认及取消按钮的对话框 如果点击确定此方法返回true 否则返回false
          window.confirm(
            "确认删除" + "这件商品吗?" + "\n" + "\n" + this.title + "\n"
          )
        ) {
          // 点击确定后 向父组件传入此商品的索引号 为什么传索引号 因为加入购物车后id不唯一
          this.$emit("father", this.index);
        }
      }
    },
    add() {
      // 点击加按钮 商品数量加一传给父组件
      this.$emit("num-change", this.num + 1);
    },
  },
};
</script>

<style lang="less" scoped>
div {
  user-select: none;
}
.b {
  position: relative;
  left: 210px !important;
  top: -95px;
  font-size: 12px;
  button {
    margin-left: 10px;
  }
}
.s {
  position: relative;
  display: inline-block;
  top: 1px;
  left: 5px;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  width: 30px;
  height: 15px;
}
</style>